<!doctype html>
<html lang="en">
<head>
    <title>Super Panel - client method</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijsuperpanel.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijsuperpanel.js" type="text/javascript"></script>
    <style type="text/css">
        #superPanel
        {
            width: 754px;
            height: 300px;
        }
        .elements ul
        {
            padding: 8px 0 0 8px;
            margin: 0px;
            width: 840px;
            float: left;
        }
        
        .elements ul li
        {
            background: #fff;
            color: #fff;
            font-weight: 900;
            height: 70px;
            margin: 0 8px 8px 0;
            padding: 0;
            padding-top: 62px;
            position: relative;
            text-align: center;
            width: 132px;
            text-shadow: 1px 1px 2px #000000;
        }
        
        .elements li
        {
            float: left;
            list-style: none;
        }
    </style>
    <script id="scriptInit" type="text/javascript">
        $(function () {
            $("#superPanel").wijsuperpanel();
        });
        function scroll(x, y) {
            try {
                var x = parseInt($('#inputX').val());
                var y = parseInt($('#inputY').val());
            }
            catch (e) {
                return;
            }

            $("#superPanel").wijsuperpanel('scrollTo', x, y);
        }
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Client Method</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="superPanel">
                <div class="elements">
                    <ul>
                        <li style="background: activeborder;"><span>ActiveBorder</span></li>
                        <li style="background: activecaption;"><span>ActiveCaption</span></li>
                        <li style="background: captiontext;"><span>ActiveCaptionText</span></li>
                        <li style="background: appworkspace;"><span>AppWorkspace</span></li>
                        <li style="background: buttonface;"><span>Control</span></li>
                        <li style="background: buttonshadow;"><span>ControlDark</span></li>
                        <li style="background: threeddarkshadow;"><span>ControlDarkDark</span></li>
                        <li style="background: buttonface;"><span>ControlLight</span></li>
                        <li style="background: buttonhighlight;"><span>ControlLightLight</span></li>
                        <li style="background: buttontext;"><span>ControlText</span></li>
                        <li style="background: background;"><span>Desktop</span></li>
                        <li style="background: graytext;"><span>GrayText</span></li>
                        <li style="background: highlight;"><span>Highlight</span></li>
                        <li style="background: highlighttext;"><span>HighlightText</span></li>
                        <li style="background: highlight;"><span>HotTrack</span></li>
                        <li style="background: inactiveborder;"><span>InactiveBorder</span></li>
                        <li style="background: inactivecaption;"><span>InactiveCaption</span></li>
                        <li style="background: inactivecaptiontext;"><span>InactiveCaptionText</span></li>
                        <li style="background: infobackground;"><span>Info</span></li>
                        <li style="background: infotext;"><span>InfoText</span></li>
                        <li style="background: menu;"><span>Menu</span></li>
                        <li style="background: menutext;"><span>MenuText</span></li>
                        <li style="background: scrollbar;"><span>ScrollBar</span></li>
                        <li style="background: window;"><span>Window</span></li>
                        <li style="background: windowframe;"><span>WindowFrame</span></li>
                        <li style="background: windowtext;"><span>WindowText</span></li>
                        <li style="background: Transparent;"><span>Transparent</span></li>
                        <li style="background: AliceBlue;"><span>AliceBlue</span></li>
                        <li style="background: AntiqueWhite;"><span>AntiqueWhite</span></li>
                        <li style="background: Aqua;"><span>Aqua</span></li>
                        <li style="background: Aquamarine;"><span>Aquamarine</span></li>
                        <li style="background: Azure;"><span>Azure</span></li>
                        <li style="background: Beige;"><span>Beige</span></li>
                        <li style="background: Bisque;"><span>Bisque</span></li>
                        <li style="background: Black;"><span>Black</span></li>
                        <li style="background: BlanchedAlmond;"><span>BlanchedAlmond</span></li>
                        <li style="background: Blue;"><span>Blue</span></li>
                        <li style="background: BlueViolet;"><span>BlueViolet</span></li>
                        <li style="background: Brown;"><span>Brown</span></li>
                        <li style="background: BurlyWood;"><span>BurlyWood</span></li>
                        <li style="background: CadetBlue;"><span>CadetBlue</span></li>
                        <li style="background: Chartreuse;"><span>Chartreuse</span></li>
                        <li style="background: Chocolate;"><span>Chocolate</span></li>
                        <li style="background: Coral;"><span>Coral</span></li>
                        <li style="background: CornflowerBlue;"><span>CornflowerBlue</span></li>
                        <li style="background: Cornsilk;"><span>Cornsilk</span></li>
                        <li style="background: Crimson;"><span>Crimson</span></li>
                        <li style="background: Cyan;"><span>Cyan</span></li>
                        <li style="background: DarkBlue;"><span>DarkBlue</span></li>
                        <li style="background: DarkCyan;"><span>DarkCyan</span></li>
                        <li style="background: DarkGoldenrod;"><span>DarkGoldenrod</span></li>
                        <li style="background: DarkGray;"><span>DarkGray</span></li>
                        <li style="background: DarkGreen;"><span>DarkGreen</span></li>
                        <li style="background: DarkKhaki;"><span>DarkKhaki</span></li>
                        <li style="background: DarkMagenta;"><span>DarkMagenta</span></li>
                        <li style="background: DarkOliveGreen;"><span>DarkOliveGreen</span></li>
                        <li style="background: DarkOrange;"><span>DarkOrange</span></li>
                        <li style="background: DarkOrchid;"><span>DarkOrchid</span></li>
                        <li style="background: DarkRed;"><span>DarkRed</span></li>
                        <li style="background: DarkSalmon;"><span>DarkSalmon</span></li>
                        <li style="background: DarkSeaGreen;"><span>DarkSeaGreen</span></li>
                        <li style="background: DarkSlateBlue;"><span>DarkSlateBlue</span></li>
                        <li style="background: DarkSlateGray;"><span>DarkSlateGray</span></li>
                        <li style="background: DarkTurquoise;"><span>DarkTurquoise</span></li>
                        <li style="background: DarkViolet;"><span>DarkViolet</span></li>
                        <li style="background: DeepPink;"><span>DeepPink</span></li>
                        <li style="background: DeepSkyBlue;"><span>DeepSkyBlue</span></li>
                        <li style="background: DimGray;"><span>DimGray</span></li>
                        <li style="background: DodgerBlue;"><span>DodgerBlue</span></li>
                        <li style="background: Firebrick;"><span>Firebrick</span></li>
                        <li style="background: FloralWhite;"><span>FloralWhite</span></li>
                        <li style="background: ForestGreen;"><span>ForestGreen</span></li>
                        <li style="background: Fuchsia;"><span>Fuchsia</span></li>
                        <li style="background: Gainsboro;"><span>Gainsboro</span></li>
                        <li style="background: GhostWhite;"><span>GhostWhite</span></li>
                        <li style="background: Gold;"><span>Gold</span></li>
                        <li style="background: Goldenrod;"><span>Goldenrod</span></li>
                        <li style="background: Gray;"><span>Gray</span></li>
                        <li style="background: Green;"><span>Green</span></li>
                        <li style="background: GreenYellow;"><span>GreenYellow</span></li>
                        <li style="background: Honeydew;"><span>Honeydew</span></li>
                        <li style="background: HotPink;"><span>HotPink</span></li>
                        <li style="background: IndianRed;"><span>IndianRed</span></li>
                        <li style="background: Indigo;"><span>Indigo</span></li>
                        <li style="background: Ivory;"><span>Ivory</span></li>
                        <li style="background: Khaki;"><span>Khaki</span></li>
                        <li style="background: Lavender;"><span>Lavender</span></li>
                        <li style="background: LavenderBlush;"><span>LavenderBlush</span></li>
                        <li style="background: LawnGreen;"><span>LawnGreen</span></li>
                        <li style="background: LemonChiffon;"><span>LemonChiffon</span></li>
                        <li style="background: LightBlue;"><span>LightBlue</span></li>
                        <li style="background: LightCoral;"><span>LightCoral</span></li>
                        <li style="background: LightCyan;"><span>LightCyan</span></li>
                        <li style="background: LightGoldenrodYellow;"><span>LightGoldenrodYellow</span></li>
                        <li style="background: LightGrey;"><span>LightGray</span></li>
                        <li style="background: LightGreen;"><span>LightGreen</span></li>
                        <li style="background: LightPink;"><span>LightPink</span></li>
                        <li style="background: LightSalmon;"><span>LightSalmon</span></li>
                        <li style="background: LightSeaGreen;"><span>LightSeaGreen</span></li>
                        <li style="background: LightSkyBlue;"><span>LightSkyBlue</span></li>
                        <li style="background: LightSlateGray;"><span>LightSlateGray</span></li>
                        <li style="background: LightSteelBlue;"><span>LightSteelBlue</span></li>
                        <li style="background: LightYellow;"><span>LightYellow</span></li>
                        <li style="background: Lime;"><span>Lime</span></li>
                        <li style="background: LimeGreen;"><span>LimeGreen</span></li>
                        <li style="background: Linen;"><span>Linen</span></li>
                        <li style="background: Magenta;"><span>Magenta</span></li>
                        <li style="background: Maroon;"><span>Maroon</span></li>
                        <li style="background: MediumAquamarine;"><span>MediumAquamarine</span></li>
                        <li style="background: MediumBlue;"><span>MediumBlue</span></li>
                        <li style="background: MediumOrchid;"><span>MediumOrchid</span></li>
                        <li style="background: MediumPurple;"><span>MediumPurple</span></li>
                        <li style="background: MediumSeaGreen;"><span>MediumSeaGreen</span></li>
                        <li style="background: MediumSlateBlue;"><span>MediumSlateBlue</span></li>
                        <li style="background: MediumSpringGreen;"><span>MediumSpringGreen</span></li>
                        <li style="background: MediumTurquoise;"><span>MediumTurquoise</span></li>
                        <li style="background: MediumVioletRed;"><span>MediumVioletRed</span></li>
                        <li style="background: MidnightBlue;"><span>MidnightBlue</span></li>
                        <li style="background: MintCream;"><span>MintCream</span></li>
                        <li style="background: MistyRose;"><span>MistyRose</span></li>
                        <li style="background: Moccasin;"><span>Moccasin</span></li>
                        <li style="background: NavajoWhite;"><span>NavajoWhite</span></li>
                        <li style="background: Navy;"><span>Navy</span></li>
                        <li style="background: OldLace;"><span>OldLace</span></li>
                        <li style="background: Olive;"><span>Olive</span></li>
                        <li style="background: OliveDrab;"><span>OliveDrab</span></li>
                        <li style="background: Orange;"><span>Orange</span></li>
                        <li style="background: OrangeRed;"><span>OrangeRed</span></li>
                        <li style="background: Orchid;"><span>Orchid</span></li>
                        <li style="background: PaleGoldenrod;"><span>PaleGoldenrod</span></li>
                        <li style="background: PaleGreen;"><span>PaleGreen</span></li>
                        <li style="background: PaleTurquoise;"><span>PaleTurquoise</span></li>
                        <li style="background: PaleVioletRed;"><span>PaleVioletRed</span></li>
                        <li style="background: PapayaWhip;"><span>PapayaWhip</span></li>
                        <li style="background: PeachPuff;"><span>PeachPuff</span></li>
                        <li style="background: Peru;"><span>Peru</span></li>
                        <li style="background: Pink;"><span>Pink</span></li>
                        <li style="background: Plum;"><span>Plum</span></li>
                        <li style="background: PowderBlue;"><span>PowderBlue</span></li>
                        <li style="background: Purple;"><span>Purple</span></li>
                        <li style="background: Red;"><span>Red</span></li>
                        <li style="background: RosyBrown;"><span>RosyBrown</span></li>
                        <li style="background: RoyalBlue;"><span>RoyalBlue</span></li>
                        <li style="background: SaddleBrown;"><span>SaddleBrown</span></li>
                        <li style="background: Salmon;"><span>Salmon</span></li>
                        <li style="background: SandyBrown;"><span>SandyBrown</span></li>
                        <li style="background: SeaGreen;"><span>SeaGreen</span></li>
                        <li style="background: SeaShell;"><span>SeaShell</span></li>
                        <li style="background: Sienna;"><span>Sienna</span></li>
                        <li style="background: Silver;"><span>Silver</span></li>
                        <li style="background: SkyBlue;"><span>SkyBlue</span></li>
                        <li style="background: SlateBlue;"><span>SlateBlue</span></li>
                        <li style="background: SlateGray;"><span>SlateGray</span></li>
                        <li style="background: Snow;"><span>Snow</span></li>
                        <li style="background: SpringGreen;"><span>SpringGreen</span></li>
                        <li style="background: SteelBlue;"><span>SteelBlue</span></li>
                        <li style="background: Tan;"><span>Tan</span></li>
                        <li style="background: Teal;"><span>Teal</span></li>
                        <li style="background: Thistle;"><span>Thistle</span></li>
                        <li style="background: Tomato;"><span>Tomato</span></li>
                        <li style="background: Turquoise;"><span>Turquoise</span></li>
                        <li style="background: Violet;"><span>Violet</span></li>
                        <li style="background: Wheat;"><span>Wheat</span></li>
                        <li style="background: White;"><span>White</span></li>
                        <li style="background: WhiteSmoke;"><span>WhiteSmoke</span></li>
                        <li style="background: Yellow;"><span>Yellow</span></li>
                        <li style="background: YellowGreen;"><span>YellowGreen</span></li>
                        <li style=""><span>ButtonFace</span></li>
                        <li style=""><span>ButtonHighlight</span></li>
                        <li style=""><span>ButtonShadow</span></li>
                        <li style="background: activecaption;"><span>GradientActiveCaption</span></li>
                        <li style="background: inactivecaption;"><span>GradientInactiveCaption</span></li>
                        <li style="background: menu;"><span>MenuBar</span></li>
                        <li style="background: highlighttext;"><span>MenuHighlight</span></li>
                    </ul>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <label for="inputX">
                    X positon
                </label>
                <input type="text" id="inputX" value="100" />
                <label for="inputY">
                    Y position
                </label>
                <input type="text" id="inputY" value="100" />
                <input type="button" id="doScroll" value="Scroll" onclick="scroll()" />
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
This sample shows how you can scroll to a specified position.
        </div>
    </div>
</body>
</html>
